<script setup>
import {ref, onMounted, watch} from "vue";
import * as echarts from 'echarts'

const props = defineProps({
  chlorophyll: {
    type: Array,
    default: () => []
  }
})
const chlorophyll = ref()
const option = ref({
  title: {
    text: '海洋中叶绿素含量',
    textStyle: {
      fontSize: 14,//加
      //color:white",
      letterSpacing: 1
    },
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['叶绿素a', '叶绿素b', '叶绿素c'],
    x: 'right',
    textStyle: {
      fontSize: 12,//加
    },
  },
  grid: {
    left: '5%',
    right: '2.5%',
    bottom: '2%',
    containLabel: true
  },
  toolbox: {
    show: false,
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLabel: {
      textStyle: {
        fontSize: 9,//加
      },
      rotate: 55 // 这里的55表示顺时针旋转角度为55度
    },
    data: ['2月1日 10:14:05', '2月1日 10:17:08', '2月1日 10:17:32',
      '2月1日 10:17:53', '2月1日 10:18:26', '2月1日 10:18:47', '2月1日 10:19:17']
  },
  yAxis: {
    name: '含量(mg/m^3)',
    type: 'value',
    axisLine: {
      show: true
    }
  },
  series: [
    {
      name: '叶绿素a',
      type: 'line',
      //stack: 'Total',
      smooth: true,
      data: []
    },
    {
      name: '叶绿素b',
      type: 'line',
      //stack: 'Total',
      smooth: true,
      data: []
    },
    {
      name: '叶绿素c',
      type: 'line',
      //stack: 'Total',
      smooth: true,
      data: []
    },
  ]
})
onMounted(() => {
  let myChart = echarts.init(chlorophyll.value, 'dark', {
    renderer: 'canvas',
    useDirtyRect: false
  });
  let app = {};

  myChart.setOption(option.value);
  watch(props,()=>{
    option.value.series[0].data=props.chlorophyll.map(item=>item.chlorophyll_a)
    option.value.series[1].data=props.chlorophyll.map(item=>item.chlorophyll_b)
    option.value.series[2].data=props.chlorophyll.map(item=>item.chlorophyll_c)
    myChart.setOption(option.value);
  })
  window.addEventListener('resize', myChart.resize);
})
</script>

<template>
  <div class="content-left3" ref="chlorophyll"></div>
</template>

<style scoped>
.content-left3 {
  /*height:600px;*/
  //border:1px solid red;
  flex-grow: 1;
}
</style>
<!--2024/2/2 13:12-->